<template>
	<view>
		<view class="login_container">
			<view class="btn_box">
				<up-button iconColor="#fff" color="linear-gradient(to right, rgb(216, 0, 0), rgb(213, 90, 2))" icon="weixin-fill" class="btn" text="微信一键登录" @click="onLogin"></up-button>
			</view>
		</view>

	</view>

</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted
	} from "vue"

	import config from "@/config/config.js"
	import {
		useStore
	} from '@/store/index.js'
	export default {
		setup() {
			const store = useStore()
			const state = reactive({
				iphoneShow: false,
				authShow: false,
				show: true,
				sessionKey: '',
				openid: '',
				unionid: '',
				avatarUrl: '',
				nickName: '昵称',
			})

			const getUserProfile = () => {
				uni.getUserProfile({
					desc: '用户信息展示',
					success: (res) => {
						console.log(res)

						onLogin()
					},
					fail: (err) => {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						})
					}
				})
			}

			//授权登陆
			const onLogin = () => {
				uni.showLoading({
					title: "微信登录中",
					mask: true
				})
				uni.login({
					provider: 'weixin',
					timeout: 40000,
					success: async (res) => {


						if (res.errMsg == "login:ok") {

							 store.login(res.code).then(()=>{
								 uni.hideLoading() 
								 uni.reLaunch({
								 	url:'/pages/index/index'
								 })
							 }).catch(()=>{
								uni.hideLoading() 
							 })

							
							

						} else {
							uni.hideLoading()
							uni.showToast({
								title: '授权失败',
								icon: "none",
								duration: 4000,
							})
						}
					},
					fail(err) {

						reject(err)
					},
					complete(res) {

						if (res.errMsg !== "login:ok") {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							})
							uni.hideLoading()
						}
					}
				})
			}

			return {
				...toRefs(state),
				onLogin,
				getUserProfile,
			}
		},
	}
</script>

<style lang="scss" scoped>
	.login_container {
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn_box {
			display: flex;
			width: 600rpx;

		}

	}
</style>